<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
	<title>让坦克开起来</title>
	<style type="text/css">
		input {font-size: 26px;margin-top: 20px;}
        body {background-image: url(images/grassland.png);}
        #mytank {position: absolute;left: 10px;top: 100px}
	</style>
</head>
<body>
    <img id="mytank" src="images/right.png"/>   
    <script>
      // 编写代码，让坦克能上下左右移动
      //199000749许业娜
		var Swidth = document.documentElement.clientWidth;
		var Sheight = document.documentElement.clientHeight;
		var otank = document.getElementById("mytank");
		console.log(otank)
		document.onkeydown = function (eve) {
			var code = eve.keyCode || eve.which;
			var L = otank.offsetLeft;
			var T = otank.offsetTop;
			var current = 0;
			if (code == 37 || code == 65) {
				if(L >= 10)
					L -= 10;
				current = (current + 180) % 360;
				otank.style.transform = 'rotate(' + current + 'deg)';
			};
			if (code == 38 || code == 87) {
				if(T >= 10)
					T -= 10;
				current = (current - 90) % 360;
				otank.style.transform = 'rotate(' + current + 'deg)';
			};
			if (code == 39 || code == 68) {
				if(L <= Swidth - 90)
					L += 10;
				current = (current) % 360;
				otank.style.transform = 'rotate(' + current + 'deg)';
			};
			if (code == 40 || code == 83) {
				if(T <= Sheight - 80)
					T += 10;
				current = (current + 90) % 360;
				otank.style.transform = 'rotate(' + current + 'deg)';
			};
			otank.style.top = T + "px";
			otank.style.left = L + "px";
		}
    </script>
</body>
</html>